Estoy usando la API de la NASA para tomar fotografías de Marte tomadas por el Mars Rover. Actualmente, mi código funciona con la obtención de imágenes; sin embargo, quiero que sea más dinámico. Mi código:
import React, { useEffect, useState } from "react"; import NavBar from "./NavBar"; const apiKey = process.env.REACT_APP_NASA_API_KEY; function MarsPhoto() { const [data, setData] = useState('null') const [solDay, setSolDay] = useState('') const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=${solDay}&camera=fhaz&api_key=${apiKey}` const fetchPhotoData = (event) => { if(event.key === 'Enter') { fetch(apiUrl) .then((response) => response.json()) .then((data) => setData(data)) } } useEffect(() => { fetchPhotoData() }, []) return( <> <NavBar/> <div className="sol-search"> <input value={solDay} onChange={event => setSolDay(event.target.value)} placeholder="Enter a Sol Day" type="text"/> </div> <div className="image-fhaz"> <img src={data.photos ? (data.photos.length !== 0 ? data.photos["0"]["img_src"] : 'https://www.ncenet.com/wp-content/uploads/2020/04/No-image-found.jpg') : 'null'} alt="Pitcure"/> </div> </> ) } export default MarsPhoto;Cuando digo que quiero que sea dinámico, quiero que el usuario ingrese un 'día del sol' y la API mostrará la imagen en función de ese día del sol. Ya tengo el parámetro 'solDay' en la API. He usado un controlador de claves, por lo que cuando ingrese el número, realizará la llamada API y devolverá la imagen. Tengo la entrada con el evento, sin embargo, está arrojando un "MarsPhoto.js: 14 Uncaught TypeError: no se pueden leer las propiedades de undefined (leyendo 'clave')", no estoy seguro de por qué. En lugar de usar fetch, ¿sería mejor usar Axios? Preferiría usar fetch ya que estoy más familiarizado con esto. ¿Que puedo hacer?
Primero, debe detectar una respuesta de error potencial de la API. En segundo lugar, solicita un parámetro de evento en su función fetchPhotoData, lo llama en useEffect, significa que en la primera carga de su componente, su función se ejecutará pero no hay parámetros de evento y su función no tiene un escudo para parámetros indefinidos...
Echa un vistazo al siguiente código, debería ayudarte. :)
const fetchPhotoData = (event) => { if (!event?.key) { return console.info("[fetchPhotoData] : no event.key params"); } if (event.key === "Enter") { fetch(apiUrl) .then((response) => response.json()) .then((data) => setData(data)) .catch((e) => console.error("[fetchPhotoData] error : ", e)); } };Editar :
El cambio, establece nuevos datos en un efecto de uso, pero no escucha este cambio, por lo tanto, su efecto de uso no se vuelve a montar, debe volver a escribir su efecto de uso de esta manera:
const fetchPhotoData = useCallback( (event) => { ... current code }, [apiUrl] ); useEffect(() => { fetchPhotoData(); }, [fetchPhotoData]); apiURL es escuchado por la matriz de dependencias de su función useCallback, y useEffect lo puede escuchar correctamente.